<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据分析展示</title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-layout1-header">
            <nav>
                <div class="king-header2 navbar navbar-blue  f14">
                    <div class="nav-container">
                        <div class="navbar-header">
                            <button class="pull-right visible-xs navbar-toggle collapsed navbar-toggle-sm" type="button" data-toggle="collapse" data-target="#king-header2-navbar-collapse"> <i class="fa fa-fw fa-ellipsis-v">                    </i> </button>
                            <a class="navbar-brand">
                                <img src="./static/logo.jpg" alt="" class="logo" style="margin-top:-5px;"> </a>
                        </div>
                        <div class="navbar-collapse collapse" id="king-header2-navbar-collapse">
                            <ul class="nav navbar-nav navbar-left hidden-sm">
                                <li>
                                    <a>
                                        <span>SZIIT学生信息管理系统</span>
                                    </a>
                                </li>
                                <li >
                                    <a href="{{ url_for('allInfoPage') }}">
                                        <span>学生信息管理</span>
                                    </a>
                                </li>
                                <li class="open">
                                    <a href="{{ url_for('showData') }}">
                                        <span>数据可视化</span>
                                    </a>
                                </li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right">
                                {%  if session.get('user') %}
                                    <li>
                                        <a>
                                            <span> {{ session['user'] }} </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ url_for('logout') }}">
                                            <span> 注销 </span>
                                        </a>
                                    </li>
                                {% else %}
                                    <li>
                                        <a href="{{ url_for('login') }}">
                                            <span> 登录 </span>
                                        </a>
                                    </li>
                                {% endif %}
                                {% if not session.get('admin') %}
                                <li>
                                    <a href="{{ url_for('admin') }}">
                                        <span> 管理员登录 </span>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            <div class="king-widget1  m0">
                <div class="king-widget2-content p25">
                    <div class="king-counter king-counter-lg">
                        <span class="king-counter-number">数据可视化分析</span>
                        <div class="king-counter-label text-uppercase"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="king-layout2-main mt15" style="width:960px;">
            <div class="container-fluid mb0 ">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel mb0 panel-box  ">
                            <div class="list-justified-container">
                                <ul class="list-justified text-center">
                                    <li>
                                        <p class="f24">{{ studentCount }}</p>
                                        <p>注册人数</p>
                                    </li>
                                    <li>
                                        <p class="f24">{{ schoolForMax }}</p>
                                        <p>人数最多的学院</p>
                                    </li>
                                    <li>
                                        <p class="f24">{{ classForMax }}</p>
                                        <p>人数最多的班级</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br/><br/><br/>
        <div class="king-widget1  m0">
             <div class="container-fluid mb0 ">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-5">
                        <div style="height: 400px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;" id="chart_1624347032977" class="king-chart-box chart-line " _echarts_instance_="1624346888707"></div>
                    </div>
                    <div class="col-md-5">
                        <div style="height: 400px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;" id="chart_1624347058117" class="king-chart-box chart-pie " _echarts_instance_="1624346888708"></div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
            <div class="container-fluid mb0 ">
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6"></div>
                </div>
            </div>
        </div>
    </div>
</body>

    <script type="text/javascript">
        function createEBarChart(conf){
            var myChart = echarts.init(document.getElementById(conf.selector));
            var legendData = [];
            for(var i = 0; i < conf.data.series.length; i++){
                legendData.push(conf.data.series[i].name);
            }
            myChart.setOption({
                legend: {
                    y: 'bottom',
                    data:legendData
                },
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                xAxis : conf.data.xAxis,
                series : conf.data.series
            })
        }
        function initEBarChart(conf){
            $.ajax({
                url: conf.url,
                type: 'GET',
                dataType: conf.dataType,
                success: function(res){
                    //获取数据成功
                    if (res.result){
                        createEBarChart({
                            selector: conf.containerId, // 图表容器
                            data: res.data, // 图表数据
                        });
                    }
                }
            })
        }
    </script>
    <script>
        $(function(){
            initEBarChart({
                url: './static/dataLine.json',
                dataType: 'json',
                containerId: 'chart_1624347032977'
            });
        });
    </script>
    <script>
        // 创建图表
        function createEPieChart(conf){
            var myChart = echarts.init(document.getElementById(conf.selector));
            var aLegend = [];
            var series = conf.data.series;
            for (var i = 0; i < series.length; i++) {
                 aLegend[i] = series[i].name;
            };
            // 填入数据
            myChart.setOption({
                title : {
                    text: conf.data.title,
                    subtext: '',
                    x:'center'
                },
                legend: {
                    y: 'bottom',
                    data: aLegend
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} {b} : {c} ({d}%)"
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series: [{
                    // 根据名字对应到相应的系列
                    name:'访问来源',
                    type:'pie',
                    data: series
                }]
            });
        }

        function initEPieChart(conf){
            $.ajax({
                url: conf.url,
                type: 'GET',
                dataType: conf.dataType,
                success: function(res){
                    //获取数据成功
                    if (res.result){
                        var data = res.data;
                        createEPieChart({
                            selector: conf.containerId, // 图表容器
                            data: data, // 图表数据
                        });
                    }
                }
            });
        }
    </script>
    <script>
        $(function(){
            initEPieChart({
                url: './static/dataPie.json',
                dataType: 'json',
                containerId: 'chart_1624347058117'
            });
        });
    </script>

</html>


